<template>
  <div>
    <el-button type="warning">增加分类</el-button>
    <!-- 商品分类列表表格 -->
    <el-table
       v-loading="loading"
       element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="cates" style="width: 100%;margin-top: 10px">
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="icon" label="分类图标">
        <template slot-scope="scope">
          <div>
            <img :src="scope.row.icon" alt />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="onOff" label="启用">
        <template slot-scope="scope">
          <el-tag effect="dark" :color="scope.row.onOff?'green': 'gray'">
            {{scope.row.onOff?'启动':'禁用'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
           <el-button type="primary" size="mini">编辑</el-button>
           <el-button type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- /商品分类列表表格 -->
    <!-- 分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next, jumper, sizes"
      :current-page="current"
      :page-size="pageSize"
      @size-change="changeSize"
      @current-change="currentChange"
      :total="total">
    </el-pagination>
    <!-- /分页组件 -->
  </div>
</template>

<script>
import { fetchCates } from '_api'
export default {
  data () {
    return {
      loading: false,
      cates: [], // 商品分类列表
      current: 1, // 分页当前页
      pageSize: 10, // 分页一页多少条
      total: 0 // 分页中总条数 需要后端返回
    }
  },
  methods: {
    currentChange (current) {
      // 点击分页 切换 页码时触发
      this.current = current
      this.fetchCates()
    },
    changeSize (pageSize) {
      // 分页 改变显示  一页显示条数时触发
      this.pageSize = pageSize
      // 重新发送请求，请求 列表数据
      this.fetchCates()
    },
    // 请求商品列表
    fetchCates () {
      // 显示loading
      this.loading = true
      fetchCates({
        page: this.current,
        pageSize: this.pageSize
      }).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          this.cates = res.data.data.lists
          this.total = res.data.data.total
        }
      })
    }
  },
  created () {
    this.fetchCates()
  }
}
</script>

<style lang="scss" scoped>
</style>
